<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link href="../static/lib/Semantic-UI-CSS-master/semantic.min.css" rel="stylesheet">
    <link href="../static/css/typo.css" rel="stylesheet">
    <link href="../static/css/me.css" rel="stylesheet">
</head>
<body>
    <!-- 头部 -->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
          <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Venns'Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right item">
              <div class="ui icon  input">
                <input type="text" placeholder="Search...">
                <i class="search link icon"></i>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="ui meun toggle black icon button m-right-top m-mobile-show">
          <i class="sidebar icon"></i>
        </a>
      </nav>
    
    
    <!-- 主体内容 -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <div class="ui top attached segment">
                <!-- 头部 -->
                <div class="ui horizontal link list">
                    <div class="item">
                      <img src="https://picsum.photos/id/10/100/100" alt="" class="ui avatar image">
                      <div class="content">
                        <a class="header">Venns</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar alternate outline icon"></i>
                      2020-1-1
                    </div>
                    <div class="item">
                      <i class="eye icon"></i>
                      1234
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
                <!-- 图片区域 -->
                <img src="https://picsum.photos/id/10/800/450" alt="" class="ui fluid rounded image">
            </div>
            <div class="ui attached padded segment">
                <!-- 内容 -->
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">原创</div>
                </div>
                <!-- 文章 -->
                <h2 class="ui center aligned header"></h2>
                <div id="content" class="typo typo-selection m-padded-lr-responsive m-padded-tb-large">
                    
                </div>
                <!-- 标签 -->
                <div class="m-padded-lr-responsive">
                    <div class="ui basic teal left pointing label">
                        标签
                    </div>
                </div>
                <!-- 赞赏 -->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">
                        赞赏
                    </button>
                </div>
                <div class="ui pay flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="../static/img/wechat.png" alt="" class="ui rounded bordered image" style="width: 120px;">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="../static/img/wechat.png" alt="" class="ui rounded bordered image" style="width: 120px;">
                                <div>支付宝</div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="ui attached positive message">
                <!-- 博客信息 -->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>作者:</li>
                            <li>发表时间:</li>
                        </ui>
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment">
                <!-- 留言区域 -->
                <div class="ui teal segment">
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                            <img src="https://picsum.photos/id/10/100/100">
                            </a>
                            <div class="content">
                            <a class="author">Matt</a>
                            <div class="metadata">
                                <span class="date">Today at 5:42PM</span>
                            </div>
                            <div class="text">
                                How artistic!
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                            <img src="https://picsum.photos/id/10/100/100">
                            </a>
                            <div class="content">
                            <a class="author">Elliot Fu</a>
                            <div class="metadata">
                                <span class="date">Yesterday at 12:30AM</span>
                            </div>
                            <div class="text">
                                <p>This has been very useful for my research. Thanks as well!</p>
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                            </div>
                            <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                <img src="https://picsum.photos/id/10/100/100">
                                </a>
                                <div class="content">
                                <a class="author">Jenny Hess</a>
                                <div class="metadata">
                                    <span class="date">Just now</span>
                                </div>
                                <div class="text">
                                    Elliot you are always so right :)
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                            <img src="https://picsum.photos/id/10/100/100">
                            </a>
                            <div class="content">
                            <a class="author">Joe Henderson</a>
                            <div class="metadata">
                                <span class="date">5 days ago</span>
                            </div>
                            <div class="text">
                                Dude, this is awesome. Thanks so much
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="留下您的评论..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-mini">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="昵称">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-mini">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱"">
                            </div>
                        </div>
                        <div class="field m-margin-bottom-mini m-mobile-wide">
                            <button class="ui teal button m-mobile-wide">
                                <i class="edit icon"></i>发布
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/img/wechat.png" class="ui rounded image" alt="" style="width: 110px"/>
                        </div>
    
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">testXXXXXXXXX</a>
                        <a class="item" href="#">testXXXXXXXXX</a>
                        <a class="item" href="#">testXXXXXXXXX</a>
                        <a class="item" href="#">testXXXXXXXXX</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">Email: venns@foxmail.com</a>
                        <a class="item" href="#">Qq: 2396177829</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">关于本站</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
    
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">© 2020 - 2021 Venns | Crafted with ❤️ by Venns</p>
        </div>
    </footer>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="../static/lib/Semantic-UI-CSS-master/semantic.min.js"></script>
      <script>
        $('.meun.toggle').click(function(){
          $('.m-item').toggleClass('m-mobile-hide');
        })
        $('#payButton').popup({
            popup: $('.pay.popup'),
            on: 'click',
            position: 'bottom center'
        })
      </script>
</body>
</html>